<template>
<div class="index-footer">
  <slot name="logo"></slot>
  <div class="slogan">
    <span id="slogan">多一份热爱，多一份关怀</span>
    <br>
    <span style="font-size: 13px">坚宝医疗有限公司</span>
  </div>
  <div class="company">

    <div class="contact">

      <el-popover placement="top-start" :width="200" trigger="click" :content="wechat">
        <template #reference>
          <div class="WeChat">
            <span>官方微信</span>
          </div>
        </template>
      </el-popover>
      <div class="phone">
        联系电话: 0769-12345678
      </div>

      <div class="QQ">
        官方企鹅: 475263961
      </div>

    </div>
  </div>
</div>
</template>

<script>
export default {
  name: "index-footer",
  data(){
    return{
      wechat: '123',
    }
  }
}
</script>

<style scoped>
#slogan{
  transition: 0.5s;
  color: #FF6633;
  font-size: 40px;
  cursor: default;
  font-family: Pacifico,serif;

}

#slogan:hover{
  animation: neon3 1.5s ease-in-out infinite alternate;
}


@keyframes neon3 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ffdd1b,
    0 0 70px #ffdd1b, 0 0 80px #ffdd1b, 0 0 100px #ffdd1b, 0 0 150px #ffdd1b;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ffdd1b,
    0 0 35px #ffdd1b, 0 0 40px #ffdd1b, 0 0 50px #ffdd1b, 0 0 75px #ffdd1b;
  }
}

.WeChat{
  cursor: pointer;
}

.WeChat:hover{
  color: #FF6633;
}

.index-footer{
  display: flex;
  align-items: center;
  width: 1536px;
  height: 80px;
  justify-content: space-between;
  background-color: #D5DBDB ;
  margin-left: -20px;
}

.company{
  font-size: 16px;
  display: flex;
  flex-flow: row;
  align-items: center;
  text-align: left;

}

</style>